<!-- 用户编辑弹窗 -->
<template>
  <el-drawer :visible.sync="visible" modal-append-to-body append-to-body size="80vw"
             :title="isUpdate ? '修改区域' : '添加区域'"
             :wrapperClosable="false" :show-close="false">
    <el-row type="flex" slot="title" justify="space-between">
      <el-col :span="6">{{ isUpdate ? "修改区域" : "添加区域" }}</el-col>
      <el-col :span="5">
        <el-button type="primary" size="medium" @click="onPatharrs">保存</el-button>
        <el-button @click="updateVisible(false)">取消</el-button>
      </el-col>
    </el-row>

    <el-row style="padding: 20px 50px">
      <el-col :span="3" style="line-height: 40px">学校名称:{{ schooleName }}</el-col>
      <el-col :span="3" style="line-height: 40px; margin-left: 50px;text-align: right">区域名称:</el-col>
      <el-col :span="6">
        <el-input clearable :maxlength="20" v-model="title" placeholder="请输入区域名称"/>
      </el-col>
      <el-col :span="3" style="line-height: 40px; margin-left: 50px;text-align: right">区域类型:</el-col>
      <el-col :span="6">
        <el-select v-model="modeVal" placeholder="请选择">
          <el-option v-for="item in [
              {
                value: 'safe',
                label: '学校区域',
              },
              {
                value: 'pitfall',
                label: '危险区域',
              },
            ]" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div v-if="visible" style="padding: 50px; padding-top: 0">
      <maps :schooleName="schooleName" :dzName1="dzName" ref="mapss" :statusType="modeVal" :datas="region_range"
            :visible1="visible"></maps>
    </div>
  </el-drawer>
</template>

<script>
import maps from "./map.vue";

export default {
  name: "UserEdit",
  components: {
    maps
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    schooleName: String,
    dzName: Array,
    mode: {
      type: String,
      default: 'safe'
    }
  },
  // components: { Treeselect},
  data() {
    return {
      // 提交状态
      loading: false,
      isUpdate: false,
      title: "",
      modeVal: "safe",
      datas: {},
      region_range: "",
    };
  },
  watch: {
    data(val) {
      this.isUpdate = false;
      let obj = JSON.parse(JSON.stringify(val));
      if (obj.id) {
        this.isUpdate = true;
        this.datas = {
          id: obj.id,
          schoole_id: obj.schoole_id,
        };
        this.title = obj.title;
        this.region_range = obj.region_range;
        this.$nextTick(() => {
          this.$refs.mapss.initData(obj.region_range);
        });
      } else {
        this.datas = obj
        this.title = this.schooleName;
        this.region_range = '';
        this.$nextTick(() => {
          this.$refs.mapss.initData();
        })
      }
    },
    mode(val) {
      this.modeVal = val
    }
  },
  mounted() {
  },
  methods: {
    save() {
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
    onPatharrs() {
      let dizi = this.$refs.mapss.campusOk();
      if (!dizi) {
        return this.$message({
          message: "请划至少划分一个区域位置！",
          type: "warning",
        });
      }
      if (!this.title) {
        return this.$message({
          message: "请输入区域名称！",
          type: "warning",
        });
      }
      this.$http
          .post("/schoole_region/edit", {
            ...this.datas,
            title: this.title,
            region_range: JSON.stringify(dizi),
            mode: this.modeVal,
          })
          .then(() => {
            this.updateVisible(false);
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
    },
  },
};
</script>

<style scoped>
</style>
